window.addEventListener('load', function() {
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    //经过图片显示左右按钮，离开隐藏
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
    });
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
    });
//ul和ol都有li，所以最好采用子节点获取元素
    //动态生成小圆点
    for (var i = 0; i < ul.children.length; i++) {
        var li =document.createElement('li');
        li.setAttribute('index',i);
        ol.appendChild(li);
    //1.▲给小圆点绑定点击切换图片事件
        li.addEventListener('click',function(){
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            };
            this.className = 'current';
            //小圆圈变色后切换图片
            var index = this.getAttribute('index');
            animate(ul,-index*focusWidth);
    //点击小圆圈切换图片后，把第几张图片的值给左右侧点击按钮
            num=index;

//动画函数的target是相对带有定位的父级元素而言的，所以ul和父元素foucus盒子必须有是子绝父相
        });
    };
    ol.children[0].className='current';
    //克隆第一张图,在动态生成小圆圈代码的后面，所以此时还是4个小圆圈
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
//克隆了一张图片，此时ul.children的个数已经是5了
//如果小圆圈和右侧点击使用同一个计数器num，小圆圈有4个，而图片有5张，当处于第5张图时，小圆圈应该是第1个，此时计数器不同，所以不能用一个计数器。
    //右侧按钮点击事件  num是右侧按钮点击次数,circle是小圆圈的值
    var num = 0;
    var circle = 0;
    arrow_r.addEventListener('click', function() {
        //先快速滚到第一张图片
        if(num==ul.children.length-1){
            num=0;
            ul.style.left=0;
        }
        num++;
        animate(ul,-num*focusWidth);
        circle=num;
//右侧要多考虑滚动到克隆图时小圆圈值不匹配的问题
        if(circle==ol.children.length){
            circle=0;
        }
        circleChange();
    });


//左侧按钮
    arrow_l.addEventListener('click', function() {
        //先快速滚到最后一张克隆图片
//num=0时是在第一张图，此时没事，点左侧按钮后，应先快速跳到最后一张克隆出来的图
        if(num==0){
            num=ul.children.length-1;
            ul.style.left=-num*focusWidth+'px';
        }
        num--;
        animate(ul,-num*focusWidth);
        circle=num;
        circleChange();
    });

    function circleChange() {
    // 先清除其余小圆圈的current类名
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    // 留下当前的小圆圈的current类名
    ol.children[circle].className = 'current';
    }
})